<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button
          type="primary"
          preIcon="ant-design:plus-outlined"
          v-auth="'user:add'"
          @click="handleCreate"
        >
          新增</a-button
        >
        <a-button
          :disabled="selectedRowKeys.length < 1"
          v-auth="'user:batchenable'"
          type="warning"
          preIcon="ant-design:unlock-outlined"
          @click="handleEnable"
        >
          启用</a-button
        >
        <a-button
          :disabled="selectedRowKeys.length < 1"
          type="warning"
          v-auth="'user:batchdisable'"
          preIcon="ant-design:lock-outlined"
          @click="handledeEnable"
        >
          禁用</a-button
        >
        <a-button
          :disabled="selectedRowKeys.length < 1"
          type="danger"
          v-auth="'user:batchdelete'"
          preIcon="ant-design:delete-outlined"
          @click="handleBatchDelete"
        >
          删除</a-button
        >
        <!-- <a-button
          type="primary"
          preIcon="ant-design:export-outlined"
          @click="onExportXls"
        >
          导出</a-button
        >
        <j-upload-button
          type="primary"
          preIcon="ant-design:import-outlined"
          @click="onImportXls"
          >导入</j-upload-button
        > -->
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction
          :actions="getTableAction(record)"
          :dropDownActions="getDropDownAction(record)"
        />
      </template>
    </BasicTable>
    <!--用户抽屉-->
    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
    <!--修改密码-->
    <PasswordModal @register="registerPasswordModal" @success="reload" />
  </div>
</template>

<script lang="ts" name="system-user" setup>
//ts语法
import { ref, computed, unref } from "vue";
import { BasicTable, TableAction, ActionItem } from "/@/components/Table";
import UserDrawer from "./UserDrawer.vue";
import PasswordModal from "./PasswordModal.vue";
import { useDrawer } from "/@/components/Drawer";
import { useListPage } from "/@/hooks/system/useListPage";
import { useModal } from "/@/components/Modal";
import { useMessage } from "/@/hooks/web/useMessage";
import { columns, searchFormSchema } from "./user.data";
import { del, list, info, deenabled, enabled } from "./index.api";
import { usePermission } from "/@/hooks/web/usePermission";

const { createMessage, createConfirm } = useMessage();
const { isDisabledAuth } = usePermission();
//注册drawer
const [registerDrawer, { openDrawer }] = useDrawer();
//回收站model
const [registerModal, { openModal }] = useModal();
//密码model
const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();
//代理人model
const [registerAgentModal, { openModal: openAgentModal }] = useModal();
//离职代理人model
const [registerQuitAgentModal, { openModal: openQuitAgentModal }] = useModal();
//离职用户列表model
const [registerQuitModal, { openModal: openQuitModal }] = useModal();

// 列表页面公共参数、方法
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  designScope: "user-list",
  tableProps: {
    title: "用户列表",
    api: list,
    showIndexColumn: true,
    columns: columns,
    size: "small",
    formConfig: {
      // labelWidth: 200,
      schemas: searchFormSchema,
      baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 4 },
      actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 4 },
    },
    actionColumn: {
      width: 70,
    },
    beforeFetch: (params) => {
      return Object.assign({ column: "createTime", order: "desc" }, params);
    },
  },
});

//注册table数据
const [
  registerTable,
  { reload, setSelectedRowKeys },
  { rowSelection, selectedRows, selectedRowKeys },
] = tableContext;

/**
 * 新增事件
 */
function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
    showFooter: true,
    tenantSaas: false,
  });
}
/**
 * 编辑事件
 */
async function handleEdit(record: Recordable) {
  info(record.id).then((res) => {
    openDrawer(true, {
      record: res.data,
      isUpdate: true,
      showFooter: true,
      tenantSaas: false,
    });
  });
}
/**
 * 详情
 */
async function handleDetail(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
    showFooter: false,
    tenantSaas: false,
  });
}
/**
 * 删除事件
 */
async function handleBatchDelete() {
  createConfirm({
    title: "注意",
    content: `确定要删除这些数据吗？删除后不可还原`,
    iconType: "warning",
    onOk: async () => {
      let id = selectedRowKeys.value;
      const res = await del(id);
      handlemsgSuccess(res);
      selectedRowKeys.value = [];
    },
  });
}
async function handleDelete(record) {
  let id = record.id || selectedRowKeys.value;
  const res = await del(id);
  handlemsgSuccess(res);
}
async function handleEnable() {
  let res = await enabled(selectedRowKeys.value);
  handlemsgSuccess(res);
}
async function handledeEnable() {
  let res = await deenabled(selectedRowKeys.value);
  handlemsgSuccess(res);
}
function handlemsgSuccess(res) {
  if (res.isSucceed) {
    createMessage.success(res.msg || "操作成功");
  } else {
    createMessage.error(res.msg || "操作失败");
  }
  setSelectedRowKeys([]);
  reload();
}
/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  let hasAdmin = unref(selectedRows).filter((item) => item.username == "admin");
  if (unref(hasAdmin).length > 0) {
    createMessage.warning("管理员账号不允许此操作！");
    return;
  }
}
/**
 * 成功回调
 */
function handleSuccess() {
  reload();
}

/**
 * 打开修改密码弹窗
 */
function handleChangePassword(record) {
  openPasswordModal(true, record);
}
/**
 * 打开代理人弹窗
 */
function handleAgentSettings(userName) {
  openAgentModal(true, { userName });
}
/**
 *同步流程
 */
function handleSyncUser() {}
/**
 *同步钉钉和微信回调
 */
function onSyncFinally({ isToLocal }) {
  // 同步到本地时刷新下数据
  if (isToLocal) {
    reload();
  }
}

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: "编辑",
      onClick: handleEdit.bind(null, record),
      auth: "user:edit",
      // ifShow: () => hasPermission('system:user:edit'),
    },
  ];
}
/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: "修改密码",
      auth: "user:password",
      onClick: handleChangePassword.bind(null, record),
    },
    {
      label: "删除",
      auth: "user:delete",
      popConfirm: {
        title: "是否确认删除",
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}

/**
 * 离职
 * @param userName
 */
function handleQuit(userName) {
  //打开离职代理人弹窗
  openQuitAgentModal(true, { userName });
}
</script>

<style scoped></style>
